'use client'

import { useState, useRef, useEffect } from 'react'

export default function SettingsPopover() {
  const [open, setOpen] = useState(false)
  const popoverRef = useRef<HTMLDivElement>(null)

  // 点击外部区域关闭
  useEffect(() => {
    const handleClickOutside = (e) => {
      if (popoverRef.current && !popoverRef.current.contains(e.target)) {
        setOpen(false)
      }
    }
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  return (
    <div className="relative inline-block" ref={popoverRef}>
      {/* 触发按钮 */}
      <div className="flex items-center gap-2">
        {/* <div
          onClick={() => setOpen(!open)}
          className={`w-8 h-8 flex items-center justify-center rounded-lg border-solid border-[#1f2533] bg-[#0f131c] hover:bg-[#1a1f2b] transition-all cursor-pointer ${
            open ? 'brightness-125' : ''
          }`}>
          <Settings className="w-4 h-4 text-gray-300" />
        </div> */}

        <div
          className="w-10 h-10 flex items-center justify-center rounded-2xl
bg-[#0d1117]/80 border-solid border-[#2a2f3a]
      text-gray-200 hover:text-white hover:border-[#3b82f6]
      shadow-inner hover:shadow-[0_0_20px_rgba(56,189,248,0.15)]
      transition-all duration-300 ease-out backdrop-blur-sm cursor-pointer"
          onClick={() => setOpen(!open)}>
          <div className="w-6 h-6 text-[16px] text-white transition-transform duration-300 scale-100 hover:scale-110 flex items-center justify-center">
            ⚙️
          </div>
        </div>
      </div>

      {/* Popover 菜单 */}
      {open && (
        <div
          className="absolute right-0 mt-3 w-48 rounded-xl bg-[#0f131c]
                     border-solid border-[#1f2533]
                     shadow-[0_8px_24px_rgba(0,0,0,0.4)]
                     py-2 animate-fadeIn">
          {[
            { label: 'Account Info', onClick: () => alert('Account Info') },
            { label: 'Plan & Billing', onClick: () => alert('Plan & Billing') },
            { label: 'Logout', onClick: () => alert('Logout') }
          ].map((item) => (
            <div
              key={item.label}
              onClick={() => {
                setOpen(false)
                item.onClick()
              }}
              className="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-[#1a1f2b] hover:text-white transition-colors cursor-pointer">
              {item.label}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
